<template>
  <div class="xxtx-box">
    <LabelRow size='mini' v-on:onMore="onMore" v-bind:label="label"></LabelRow>
    <div id="sjflCharts" class="take-content"/>
  </div>
</template>
<script>
import echarts from "echarts";
import LabelRow from "../common/labelRow.vue";
import { eventInfoCenterWorkbenchTypeStatistics } from "../../config/api.js";
import Pubsub from "../../utils/pubsub";
import { getTimeStr } from "../../utils";

export default {
  components: {
    LabelRow
  },
  data() {
    return {
      label: {
        url: require("../../assets/incidentCenter/sjfl_icon.png"),
        label: "事件分类统计"
      },
      chartData:{},
      getTimeStr
    };
  },
  mounted() {
    this.getList();
    this.pubsub_token1 = Pubsub.subscribe("WORKBENCH_EVENT_STATISTICS", () => {
      this.getList();
    });
  },
  methods: {
    onMore() {
      console.log("onMore");
    },
    clickList() {
      console.log("clickList");
    },

    getList() {
      eventInfoCenterWorkbenchTypeStatistics({}).then((res = {}) => {
        this.chartData = res.data||{};
        console.warn(res.data);
        this.initChart();
        }
      );
    },
    initChart() {
      this.myChart = echarts.init(document.getElementById("sjflCharts"),'light');
      const {legend=[],series=[],yAxis=[]}=this.chartData||{};
      let newSeries=[];
      series.length&&series.map((item,index)=>{
        let dataList=item.data||[];
        dataList.length>0&&dataList.map((it,ind)=>{it==0&&dataList.fill(null,ind,ind+1)});
        newSeries.push({
            name: item.name,
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: dataList||[]//[320, 302, 301, 334, 390, 330]
        })
      });
      let option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data: legend,//['一般', '较大','重大','特重大']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis:  {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: yAxis,//['市容环境类','街面次序类','施工管理类','宣传广告类','突发事件类','其他事件类']
    },
    series: newSeries||[]
};
      this.myChart.setOption(option);
    }
  },
  destroyed() {
    this.pubsub_token1 && Pubsub.unsubscribe(this.pubsub_token1);
  }
};
</script>

<style lang="scss" scoped>
// @import "../../css/unifyAcceptWorkbench.scss";
.xxtx-box {
  margin-right: 20px;
  background-color: #fff;
  >.row{
    padding: 0 15px;
    .label{
      font-size: 14px;
    }
  }
}
.take-content {
  // margin-top: 20px;
  height: 300px;
  width: 100%;
  // overflow-x: auto;
}
</style>
